body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: hsl(240, 56%, 98%);
}

.twisted-image {
  $twister-count: 10;
  $twister-ratio: 100% / $twister-count / 2;

  position: relative;
  width: 400px;
  height: 200px;
  overflow: hidden;

  .twister {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    @for $i from 1 through $twister-count {
      &:nth-child(#{$i}) {
        z-index: $twister-count - $i;
        clip-path: circle($i * $twister-ratio);
        animation: spin 4s 0.2s * ($i - 1) infinite;
      }
    }
  }
}

@keyframes spin {
  60%, 100% {
    transform: rotate(1turn);
  }
}